<template>

  <section class="indexedit">

    <Header fixed showLeft @handle-left="goBack" :title="title"></Header>

    <div class="pt-20 layout" v-if="action == 0">

      <div class="tab_btns">

        <field class="field_wrap" label="群ID" placeholder="请输入" v-model="groupId"></field>

        <field class="field_wrap" label="用户ID" placeholder="请输入" v-model="userId"></field>

      </div>

      <div class="btn_wrap"><Button block round type="info" @click="handleClicked">提交</Button></div>

    </div>

    <!-- 标签2 添加 -->

    <div class="pt-20 layout" v-if="action == 1">

      <div class="tab_btns">

        <field class="field_wrap" label="群ID" placeholder="请输入" v-model="groupId"></field>

      </div>

      <div class="add_items" v-for="(item, index) in nnds">

        <field class="field_wrap" label="用户ID" v-model="item.userId" placeholder="请输入"></field>

        <field class="field_wrap" label="数值" v-model="item.value" type="number" placeholder="请输入"></field>

        <!-- <div class="add_btn" @click="addItem(item.isAdd, index)" v-if="item.isAdd"><icon name="plus" /><span>新增</span></div> -->

        <!-- <div class="add_btn del_btn" @click="addItem(item.isAdd, index)" v-else><icon name="minus" /><span>删除</span></div> -->

      </div>

      <div class="btn_wrap"><Button block round type="info" @click="handleClickedByN">提交</Button></div>

    </div>

  </section>

</template>

<script>
import MainButton from '@/component_basics/MainButton'
import Header from '@/component_basics/Header'
import { Button, Toast, Icon } from 'vant'
import { Field } from 'vant'
import { kzAdd, kzAddN } from '@/services'

export default {
  name: 'indexedit',
  components: {
    MainButton,
    Header,
    Icon,
    Button,
    Field
  },
  data() {
    return {
      title: '新增',
      query: {},
      action: 0,
      groupId: '',
      userId: '',
      nnds: [
        { value: '', userId: '' },
        { value: '', userId: '' }
      ]
    }
  },
  created() {
    console.log(this.$route)
    if (this.$route.query.groupId) {
      this.title = '编辑'
    } else {
      this.title = '新增'
    }
    this.query = this.$route.query
    this.action = this.$route.query.action || 0
  },
  methods: {
    addItem(flag, index) {
      if (flag) {
        this.nnds[this.nnds.length - 1]['isAdd'] = false
        this.nnds = this.nnds.concat([{ value: '', userId: '' }])
      } else {
        this.nnds.splice(index, 1)
      }
    },
    handleClicked() {
      if (!this.groupId) {
        Toast('请输入群ID')
        return
      }
      if (!this.userId) {
        Toast('请输入用户ID')
        return
      }
      this.addInfo()
    },
    handleClickedByN() {
      if (!this.groupId) {
        Toast('请输入群ID')
        return
      }
      // const hasUserId = this.nnds.every(item => item.userId)
      // const hasValue = this.nnds.every(item => item.value)
      // if (!hasUserId) {
      //   Toast('请输入用户ID')
      //   return
      // }
      // if (!hasValue) {
      //   Toast('请输入数值')
      //   return
      // }
      this.addInfoByN()
    },
    addInfo() {
      kzAdd({ groupId: this.groupId, userId: this.userId, type: 0 }).then(res => {
        if (res && res.flag === 1) {
          Toast.success('新增成功')
          this.goBack()
        }
      })
    },
    addInfoByN() {
      const nnds = this.nnds.map(item => {
        return {
          value: item.value.includes('.') ? (item.value * 100).toFixed(2) * 1 : item.value * 1,
          userId: item.userId
        }
      })
      kzAddN({ groupId: this.groupId, nnds, type: 0 }).then(res => {
        if (res && res.flag === 1) {
          Toast.success('新增成功')
          this.goBack()
        }
      })
    },
    goBack() {
      this.$router.replace('/?action=' + this.action)
      // window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
.indexedit {
  background-color: #f8f8f8;
  text-align: left;
  overflow-y: scroll;
  .pt-20 {
    padding-top: 1.17333rem;
  }
  .layout {
    margin: 1rem;
    .tab_btns {
      background-color: #fff;
      overflow: hidden;
      .field_wrap {
        line-height: 1rem;
        .van-field__left-icon {
          .van-icon {
            font-size: 0.5rem;
          }
        }
        .van-cell__value {
          padding-left: 0.1rem;
        }
        .van-cell__title {
          width: auto;
        }
      }
    }
    .btn_wrap {
      margin-top: 1rem;
    }
    .add_items {
      margin-top: 0.4rem;
      position: relative;
      .add_btn {
        margin-top: 0.1rem;
        border-color: #d9d9d9;
        color: rgba(0, 0, 0, 0.88);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
        border-style: dashed;
        line-height: 0.7rem;
        text-align: center;
        span {
          margin-left: 0.1rem;
        }
      }
      .del_btn {
        border-color: #ff4d4f;
        color: #ff4d4f;
      }
    }
  }
}
</style>

